<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监控视频</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      width: 100vw;
      height: 100vh;
    }
    body {
      overflow: hidden;
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 10px;
      padding-top: 0;
      background: url('./images/bg.png') center no-repeat;
      background-size: 100% 100%;
    }
    .tab-box {
      flex-shrink: 0;
      display: flex;
      width: 100%;
      height: 50px;
      overflow: auto;
    }
    .tab-box li {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 16px;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
    }
    .tab-box li.active {
      color: #00ccff;
    }
    .video-box {
      width: 100%;
      flex: 1;
    }
    .video-box iframe {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul class="tab-box"></ul>

    <div class="video-box">
      <iframe src="" frameborder="0" id="ysIframe"></iframe>
    </div>
  </div>

  <script>
    // 获取数据
    function getListData() {
      let id = getUrlParam('id')
      if(id) {
        fetch(`/iot_device/device/getDeviceVideoNoToken?id=${id}`).then(async response => {
          let res = await response.json()
          if(res.message == 200) {
            createEl(res.data)
          }
        })
      }
    }
    getListData()

    // 创建内容
    function createEl(data) {
      let html = ''
      data.map(item => {
        let paramJson = item.param_json ? JSON.parse(item.param_json) : {}
        let url = `https://open.ys7.com/jssdk/theme.html?url=${item.video}&accessToken=${paramJson.accessToken}`
        html += `<li onclick="selectVideo(${item.ID})" data-id="${item.ID}" data-url="${url}">${item.name}</li>`
      })
      document.querySelector('.tab-box').innerHTML = html
      if(data.length) {
        setTimeout(() => {
          selectVideo(data[0].ID)
        }, 300)
      }
    }

    // 选择视频
    function selectVideo(id) {
      let list = document.getElementsByTagName('li')
      for(let i = 0; i < list.length; i++) {
        let item = list[i]
        item.classList.remove('active')
        let itemId = item.getAttribute('data-id')
        if(itemId == id) {
          item.classList.add('active')
          let url = item.getAttribute('data-url')
          document.querySelector('#ysIframe').setAttribute('src', url)
        }
      }
    }

    // 获取URL地址参数
    function getUrlParam(name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      let r = window.location.search.substr(1).match(reg);
      if (r !== null) return decodeURIComponent(r[2]);
      return null;
    }
  </script>
</body>
</html>